<template>
	<view v-if="coupShow" class="flex_zhcenter">
		<view class="kefuLogo flex_zhcenter"
		@click="receiveCouponAction"
		:style="{
			bottom:pdRpx(bottom),
			width:imgWidth,
		}">
			<!-- <u-image
			:width="pdRpx(imgWidth)"
			:height="pdRpx(imgHeight)" 
			mode="aspectFit"
			:src="imgSrc"></u-image> -->
			<img style="margin: 0 auto;" :style="{
				width:pdRpx(imgWidth),
				height:pdRpx(imgHeight),
			}" :src="imgSrc"></img>
			<image 
			@click.stop="closeCoupon"
			class="counpon-close"
			:src="imgPath.coupon_index_coupon_close_icon"></image>
		</view>
		
		<coupReceive @reduceChanceCount="reduceChanceCount" @click="close" ref="coupReceive" drawType="list"></coupReceive>
	</view>
</template>

<script>
	import coupReceive from '@/components/coup-receive/index.vue';
	
	import  { imgPath } from '@/static/imgPath.js'
	export default {
	  name: "index",
	  components: {
	    coupReceive
	  },
		props: {
			imgSrc: {//图片路径
				type: [String],
				default:()=>{
					return imgPath.coupon_index_coupon_rule
				}
			},
			count: {//优惠券使用次数
				type: [String,Number],
				default:()=>{
					return 0
				}
			},
			imgWidth: {//图片宽度
				type: [String,Number],
				default:()=>{
					return '697.87rpx'
				}
			},
			imgHeight: {//图片高度
				type: [String,Number],
				default:()=>{
					return '162.2rpx'
				}
			},
			bottom: {//定位上间距
				type: [String,Number],
				default:()=>{
					return '150rpx'
				}
			},
		},
	  data() {
	    return {
				imgPath,//图片路径
				coupShow:true,//弹窗显示
	    };
	  },
	  mounted() {
	    
	  },
	  methods: {
			reduceChanceCount(){
				this.$emit('reduceChanceCount')
			},
			pdRpx(e){
				return e.indexOf('rpx') == -1 ? (e.indexOf('%') == -1 ? e + 'rpx' : e) : e
			},
			//打开浮窗
			openCoupon() {
			  this.coupShow = true
			},
			//关闭浮窗
			closeCoupon() {
			  this.coupShow = false
			},
			coupReceiveClose(){
				this.$emit('coupReceiveClose')
			},
			//获取优惠券
			receiveCouponAction() {
			  this.$refs.coupReceive.open()
			}
	  }
	};
</script>

<style lang="less" >
	.kefuLogo{
		position: fixed;margin: 0 auto;
		
		/* #ifndef H5 */
		.counpon-close{
			position: absolute;right: -0rpx;top: -8rpx;
			width: 24rpx;height: 24rpx;
		}
		.counpon-count {
		    position: absolute;bottom: 8rpx;
		    font-size: 12rpx;font-weight: normal;color: #FD1523;text-align: center;
		    padding: 4rpx 6rpx;box-sizing: border-box; background-color: #FEE0C3;
				border-radius: 40rpx;width: 80rpx;
		}
		/* #endif */
		/* #ifdef H5 */
		.counpon-close{
			position: absolute;right: -13rpx;top: -22rpx;
			width: 34rpx;height: 34rpx;
		}
		.counpon-count {
		    position: absolute;bottom: 8rpx;
		    font-size: 12rpx;font-weight: normal;color: #FD1523;text-align: center;
		    padding: 2rpx 6rpx;box-sizing: border-box; background-color: #FEE0C3;
				border-radius: 40rpx;width: 120rpx;
		}
		/* #endif */
	}
</style>